feat(mobile): add initialPage prop to Carousel - #864
Merged
Conversation
Collaborator
✅ Heimdall Review Status
✅
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
✅
1/1
|
Denominator calculation
|
caitlin-coyiuto-cb
changed the title
caitlin-coyiuto-cb
force-pushed
the
ccoyiuto/CB1-2048
branch
from
August 28, 2026 00:07
327254c to
f3126e3
Compare
caitlin-coyiuto-cb
force-pushed
the
ccoyiuto/CB1-2048
branch
from
August 28, 2026 00:09
f3126e3 to
4422d4f
Compare
caitlin-coyiuto-cb
changed the title
caitlin-coyiuto-cb
force-pushed
the
ccoyiuto/CB1-2048
branch
from
August 28, 2026 00:14
4422d4f to
25d7132
Compare
caitlin-coyiuto-cb
marked this pull request as ready for review
August 28, 2026 16:22
hcopp
reviewed
Aug 28, 2026
hcopp
left a comment
hcopp
left a comment
Contributor
There was a problem hiding this comment.
Thanks for the PR! Had some feedback
cb-ekuersch
reviewed
Aug 28, 2026
| }); | ||
|
|
||
| const [activePageIndex, setActivePageIndex] = useState(0); | ||
| const [activePageIndex, setActivePageIndex] = useState(() => Math.max(0, initialPage ?? 0)); |
Contributor
There was a problem hiding this comment.
we should probably use the value from the ref here in case the initialPage prop does in fact change. If that were the case then the activePage state would also change
Contributor
There was a problem hiding this comment.
@caitlin-coyiuto-cb I think we need to clamp this with the max as well right?
Contributor
Author
There was a problem hiding this comment.
I don't think we can here on first render since it'd be 0? totalPages gets derived on line 725 later. Also have tests for clamping on last page (if initialPage > last page) and negative initialPage
Contributor
There was a problem hiding this comment.
Yeah I was wondering if we needed to set activePageIndex when we set hasAppliedInitialPageRef to true. I suppose goToPage does clamp automatically but I wasn't sure if there is an interim side effects if this value was way off.
caitlin-coyiuto-cb
force-pushed
the
ccoyiuto/CB1-2048
branch
3 times, most recently
from
August 28, 2026 19:39
684136f to
b8a7736
Compare
hcopp
reviewed
Aug 28, 2026
hcopp
reviewed
Aug 28, 2026
hcopp
reviewed
Aug 28, 2026
Add an uncontrolled `initialPage` prop to the cds-mobile and cds-web Carousel so a consumer can open it on a non-zero page with no animation. Seeds `activePageIndex` at init (no `onChangePage` on mount) and performs a one-time, `didInitRef`-guarded non-animated seek on the first successful measurement — reading `initialPage` via a ref and routing through `findNearestLoopOffset` when looping. Adds `initialPage` tests and a story example on both platforms. CB1-2048 Co-Authored-By: Claude <noreply@anthropic.com>
caitlin-coyiuto-cb
force-pushed
the
ccoyiuto/CB1-2048
branch
from
August 28, 2026 20:46
b8a7736 to
45fda23
Compare
hcopp
approved these changes
Aug 28, 2026
hcopp
left a comment
hcopp
left a comment
Contributor
There was a problem hiding this comment.
LGTM, thanks for all the updates
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
CB1-2048
What changed? Why?
initialPageprop to the cds-mobileCarouselso consumers can open it on a non-zero page with no animation.activePageIndexat init + a one-time,didInitRef-guarded non-animated seek on first measurement (instant.set(), no slide from page 0); readsinitialPagevia a ref since data can arrive async.onChangePageon mount; clamps out-of-range; routes throughfindNearestLoopOffsetwhen looping; a latergoToPage/drag still wins.requestAnimationFrame+goToPageworkaround (clearsTODO(CB1-2026)); unblocks the RN adoption PR (PR 2).Root cause (required for bugfixes)
N/A — feature, not a bugfix.
UI changes
Adds an "Initial Page (opens on page 3)" example to the mobile Carousel stories. Web unaffected.
CB1-2048-cds.mov
CB1-2048-cds-web.mov
Testing
How has it been tested?
Testing instructions
Automated: New
Initial Pagetests inCarousel.test.tsx— opens oninitialPage;onChangePagenot called on mount; out-of-range clamps (99→6,-5→0); latergoToPageand drag override the initial page. Full file 97/97 pass;mobiletypecheck + lint clean.Manual:
yarn nx run expo-app:ios→ open the Carousel route → the "Initial Page (opens on page 3)" example lands on page 3 with no slide from page 1; dragging/pagination still work.Illustrations/Icons Checklist
N/A — no changes under
packages/illustrations/**orpackages/icons/**.Change management
type=routine
risk=low
impact=sev5
automerge=false